TaoDuLieuPanel = Ext.extend(AbstractPanel, {
	layout : {
        type : 'vbox',
        align : 'stretch'
    },
    
    height : 900,
    
    initComponent : function() {
		this.formLabel = new Ext.form.Label({
			cls : 'main-title',
			text : lang.text.duLieu.title
		});
		
		this.formLabelContainer = new Ext.Container({
			cls : 'field-align-center',
			items : [this.formLabel]
		});
		
		var fieldPlugin = new CustomizedFieldPlugin();
		this.loaiDlieuCombo = new Ext.form.ComboBox({
			name : 'loaiDuLieu',
			hiddenName : 'loaiDuLieu',
            fieldLabel : lang.text.duLieu.loaiDl,
            selectOnFocus : true,
            width : 250,
            mode : 'local',
            triggerAction : 'all',
            valueField : 'value',
            displayField : 'text',
            store : new Ext.data.JsonStore({
                fields : ['value', 'text']
            }),
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
		});
		
		this.tinhThanhCombo = new Ext.form.ComboBox({
			name : 'tinhThanh',
			hiddenName : 'tinhThanh',
            fieldLabel : lang.text.kh.tinhThanh,
            width : 250,
            forceSelection : true,
            mode : 'local',
            triggerAction : 'all',
            valueField : 'maDuLieu',
            displayField : 'giaTri',
            store : new Ext.data.JsonStore({
                fields : ['maDuLieu', 'giaTri']
            }),
			plugins : fieldPlugin
		});
		this.quanHuyenCombo = new Ext.form.ComboBox({
			name : 'quanHuyen',
			hiddenName : 'quanHuyen',
            fieldLabel : lang.text.kh.quanHuyen,
            hidden : true,
            width : 250,
            forceSelection : true,
            mode : 'local',
            triggerAction : 'all',
            valueField : 'maDuLieu',
            displayField : 'giaTri',
            store : new Ext.data.JsonStore({
            	url : 'hopDong/reloadQuanHuyenByThanhPho',
            	autoLoad : false,
                fields : ['maDuLieu', 'giaTri']
            }),
			plugins : fieldPlugin
		});
		
		this.relatedCtn = new Ext.Container({
			width : 800,
			hidden: true,
			layout : 'hbox',
			items : [Utility.createLayoutForComponent(this.tinhThanhCombo, 90), 
			         {xtype : 'spacer', width : 280},
			         Utility.createLayoutForComponent(this.quanHuyenCombo, 90)]
		});
		
		this.giaTriTextField = new Ext.form.TextField({
			name : "giaTri",
			width : 250,
			fieldLabel : lang.text.duLieu.giaTri,
			autoCreate: {
	            tag: 'input', type: 'text', size: '20',
	            autocomplete: 'off', maxlength: '100'},
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
		});
		
		this.maDlieuTextField = new Ext.form.TextField({
			name : "maDuLieu",
			width : 250,
			style : {
				textTransform : 'uppercase'
			},
			fieldLabel : lang.text.duLieu.maDl,
			autoCreate: {
	            tag: 'input', type: 'text', size: '20',
	            autocomplete: 'off', maxlength: '50'},
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
		});
		
		this.luuBtn = new Ext.Button({
			width : 70,
			text : lang.text.luu
		});
		
		this.thoatBtn = new Ext.Button({
			width : 80,
			text : lang.text.thoat
		});
		
		var buttonCtn =  new Ext.Container({
			layout : 'hbox',
			items : [this.luuBtn, {xtype : 'spacer', width : 13}, this.thoatBtn]
		});
		
		this.detailContainer = new Ext.Container({
			width : 1000,
			layout : 'customizedlayout',
			height : 500,
			labelWidth : 90,
			items : [this.loaiDlieuCombo, {xtype : 'spacer', width : 13},
			         this.relatedCtn, {xtype : 'spacer', width : 13},
			         this.maDlieuTextField, {xtype : 'spacer', width : 13},
			         this.giaTriTextField, {xtype : 'spacer', width : 13}, buttonCtn]
		});
		
		this.items = [this.formLabelContainer, {xtype : 'spacer', height : 15}, this.detailContainer];
		TaoDuLieuPanel.superclass.initComponent.call(this);
	},
	
	afterRender : function() {
		this.submitButtons = [this.luuBtn];
		this.on('afterrender', this.initData, this);
		this.loaiDlieuCombo.on('select', this.reloadRelatedData, this);
		this.tinhThanhCombo.on('select', this.reloadQuanHuyenByThanhPho, this);
		this.maDlieuTextField.on('blur', this.validateDataCode, this);
		TaoDuLieuPanel.superclass.afterRender.call(this);		
	},
	
	initData : function() {
		Ext.Ajax.request({
            url : 'duLieu/initData',
            method : 'GET',
            scope : this,
            success : function(response, opts){
                var result = Ext.decode(response.responseText); 
                this.loaiDlieuCombo.store.loadData(result.dataTypes);
                this.tinhThanhCombo.store.loadData(result.cities);
                this.loaiDlieuCombo.focus(true);
            }, 
            failure : function() {
            	this.notifyMessage({action : "error", msg : lang.msg.responseLoadFailure})
            }
        });
	},
	
	reloadQuanHuyenByThanhPho : function(combo, record, idx) {
		this.quanHuyenCombo.clearValue();
		this.quanHuyenCombo.store.setBaseParam('maTinh', record.get('maDuLieu'));
		this.quanHuyenCombo.store.load();
	},
	
	reloadRelatedData : function(combo, record, index) {
		this.tinhThanhCombo.clearValue();
		this.quanHuyenCombo.clearValue();
		var type = record.get("value");
		if (type == lang.text.nvType || type == lang.text.cityType) {
			if (!this.relatedCtn.hidden) {
				this.relatedCtn.setVisible(false);
				this.detailContainer.doLayout();
				this.doLayout();
			}
			return
		} else {
			if (this.relatedCtn.hidden) {
				this.relatedCtn.setVisible(true);
			}
			if (type == lang.text.quanHuyenType) {
				if (!this.quanHuyenCombo.hidden) {
					this.quanHuyenCombo.setVisible(false);
				}
			} else {
				if (this.quanHuyenCombo.hidden) {
					this.quanHuyenCombo.setVisible(true);
				}
			}
			this.doLayout();
		}
	},
	
	save : function() {
		var type = this.loaiDlieuCombo.getValue();
		var maDuLieuLienQuan;
		if (type == lang.text.quanHuyenType) {
			var tinhThanh = this.tinhThanhCombo.getValue();
			if (tinhThanh == null || tinhThanh == "") {
				this.notifyMessage({action : "error", msg : lang.msg.inputRelatedData})
				return;
			}
			maDuLieuLienQuan = tinhThanh;
		}
		if (type == lang.text.phuongXaType) {
			var tinhThanh = this.tinhThanhCombo.getValue();
			var quanHuyen = this.quanHuyenCombo.getValue();
			if (tinhThanh == null || tinhThanh == "" || quanHuyen == null || quanHuyen == "") {
				this.notifyMessage({action : "error", msg : lang.msg.inputRelatedData})
				return;
			}
			maDuLieuLienQuan = quanHuyen;
		}
		
		this.getForm().submit({
		    me : this,
		    url : 'duLieu/save',
            waitMsg: lang.text.saving,
            waitMsgTarget : true,
            params : {
            	'maDuLieuLienQuan' : maDuLieuLienQuan
            },
            success : function(action, response) {
            	this.enableButtons();
            	var result = Ext.decode(response.response.responseText);
            	if (result.success) {
                	this.notifyMessage(result.msg);
				} else {
					this.notifyMessage(result.msg);
				}
            },
            failure : function(action, response) {
            	this.enableButtons();
            },
            scope : this
        });
	},
	
	validateDataCode : function(field) {
		var code = field.getValue()
		if(code == null || code =="") {
			field.markInvalid({id : 'maDuLieu', action : 'error', msg : lang.msg.nhapMaDlieu});
			return
		}
		Ext.Ajax.request({
            url : 'duLieu/validateCode',
            params : {
            	'code' : code
            },
            method : 'GET',
            scope : this,
            success : function(response, opts){
                var result = Ext.decode(response.responseText);
                if (result.codeExist) {
                	this.maDlieuTextField.markInvalid({id : 'maDuLieu', action : 'error', msg : lang.msg.duplicateMaDlieu});
                	return
				}
            }, 
            failure : function() {}
        });
	}
});